<template>
  <div class="container">
    <div class="choose-box vux-1px-b" v-for="(item,index) in matchList">
      <div class="match-title vux-1px-b">
        <p class="match-title-top" v-if="item.game_data">
          <span>{{item.game_data.big_game_name}}</span><span> {{item.game_data.start_time}} </span></p>
        <p class="match-vs" v-if="item.game_data">{{item.game_data.play_a_name}}<span class="vs">VS</span>{{item.game_data.play_b_name}}
        </p>
      </div>
      <div class="choose-item vux-1px-b flex-y-center" v-for="(item2,i) in item.bet_data">
        <check-icon @click.native="checkClick(index,item2.id)" :value.sync="item2.check"></check-icon>
        <span class="fenlei">{{item2.betType_name}}</span><span
              class="result">{{item2.play_type}}</span><span class="odds">赔率{{item2.odds}}</span>
        <span
                class="delete" @click="delete_geuss(item2.id)">删除</span>
      </div>
      <!--<div class="choose-item vux-1px-b flex-y-center">-->
      <!--<check-icon></check-icon>-->
      <!--<span class="fenlei">标准胜负</span><span-->
      <!--class="result">左胜</span><span class="odds">赔率1.54</span> <span class="delete">删除</span>-->
      <!--</div>-->
    </div>
    <!--<div class="choose-box vux-1px-b">-->
    <!--<div class="match-title vux-1px-b">-->
    <!--<p class="match-title-top"><span>选手锦标赛</span><span> 2019-03-10 03:00:00 </span></p>-->
    <!--<p class="match-vs">马克-艾伦<span class="vs">VS</span>罗尼-奥沙利文</p>-->
    <!--</div>-->
    <!--<div class="choose-item vux-1px-b flex-y-center">-->
    <!--<check-icon></check-icon>-->
    <!--<span class="fenlei">标准胜负</span><span-->
    <!--class="result">左胜</span><span class="odds">赔率1.54</span> <span class="delete">删除</span>-->
    <!--</div>-->
    <!--<div class="choose-item vux-1px-b flex-y-center">-->
    <!--<check-icon></check-icon>-->
    <!--<span class="fenlei">标准胜负</span><span-->
    <!--class="result">左胜</span><span class="odds">赔率1.54</span> <span class="delete">删除</span>-->
    <!--</div>-->
    <!--</div>-->
    <div class="no_data" v-show="show_no_data">---- 暂无购物车信息 ----</div>
    <div class="flex-row bottom-fixed vux-1px-t">
      <div class="flex-grow-1 flex-col">
        <div class="flex-row result-text">
          <div class="flex-grow-1">余额：{{yue}}</div>
          <div class="flex-grow-1">总赔率：{{getAllodds | getCount}}</div>
        </div>
        <div class="flex-grow-1 input-line vux-1px-b">
          <input type="number"
                 v-model="inputval"
                 @keyup="inputkeyup"
                 placeholder="请输入金额">
        </div>
      </div>
      <div @click="touzhu_click" class="flex-grow-0 touzhu flex-y-center flex-x-center">
        投注
      </div>
    </div>
  </div>
</template>

<script>

  import {MYCARTDETAIL, DELETEGUESSBYID, MYCARTTOUZHU} from 'src/const/uri'
  import {CheckIcon} from 'vux'
  document.title = '购物车';

  export default {
    name: "guessCart",
    components: {CheckIcon},
    data() {
      return {
        demo1: false,
        inputval: '',
        matchList: [],
        yue: '',
        uid: '',
        show_no_data: false
      }
    },
    created() {

    },
    mounted() {
      // getuid
      if (window.android) {
        this.uid = window.android.getUid();
        // window.localStorage.setItem('jcyy_uid',uid);
        this.initData();
        // alert(uid)
      } else {
        window['getUserToken'] = (token, u_id) => {
          this.uid = u_id;
          this.initData();
        };
      }
      if (isDebug) {
        this.uid = window.localStorage.getItem('jcyy_uid');
        this.initData();
      }
    },
    computed: {
      getMatch() {
        let arr = [];
        this.matchList.forEach((item) => {
          item.bet_data.forEach((item2) => {
            if (item2.check == true) {
              arr.push(item2.id)
            }
          });
        });
        return arr
      },
      getMatchid() {
        let arr = [];
        this.matchList.forEach((item) => {
          item.bet_data.forEach((item2) => {
            if (item2.check == true) {
              arr.push(item.game_id)
            }
          });
        });
        return arr
      },
      getAllodds() {
        if(this.getMatch.length>0 && this.getMatch){
          let odds = 1;
          this.matchList.forEach((item) => {
            item.bet_data.forEach((item2) => {
              if (item2.check == true) {
                odds *= Number(item2.odds);
              }
            });
          });
          return odds
        }else {
          return '0.00'
        }
      }
    },
    watch: {
      inputval: 'watchInput',
      matchList(val) {
        if (val.length > 0 && val) {
          this.show_no_data = false
        } else {
          this.show_no_data = true
        }
      }
    },
    methods: {
      initData() {
        this.$ajax.get(MYCARTDETAIL, {
          uid: this.uid
        }).then(res => {
          console.log(res.data);
          this.matchList = res.data.game_list;
          this.yue = res.data.user_balance;
        })
      },
      watchInput(val) {
        if (val && !isNaN(val) && val - 0 > 0) {
          if (Number(val) > Number(this.yue)) {
            this.$vux.toast.show({
              type: 'text',
              text: '输入金额不能大于余额',
              width: '50%'
            })
          }
        }
      },
      inputkeyup() {
        let wager = this.inputval.replace(/^\s+|\s+$/g, "");
        if (wager.length != 0) {
          let intWager = parseInt(wager);
          if (wager != intWager) {    //说明输入的是小数
            this.inputval = Math.ceil(wager);    //给它向上取整
          }
        }
      },
      onFocus(e) {
        if (this.yue > 0) {
          setTimeout(() => {
            this.inputval = 1;
            this.$vux.toast.show({
              text: '至少为1元',
              type: 'text',
              time: 1000
            });
          }, 10);
        } else {
          if (this.yue <= 0 || this.yue == '') {
            this.toRecharge();
            // this.$vux.toast.text('余额不足请充值');
          }
        }
      },
      checkClick(index, id) {
        // console.log(index,id)
        this.matchList[index].bet_data.forEach((item, i) => {
          // console.log(item);
          if (item.id !== id) {
            this.$set(this.matchList[index].bet_data[i], 'check', false);
            // console.log(12);
          }
        })
        // 所有的单选---------
        // this.matchList.forEach((item, index) => {
        //   item.bet_data.forEach((item2, i) => {
        //     // if (item2.id !== id) {
        //     //   console.log(item.bet_data);
        //     //   // this.$set(this.matchList[index].bet_data[i], 'check', false)
        //     // }
        //   });
        // });
        //  console.log(this.getMatchid)
      },
      delete_geuss(choose_guess_id) {
        this.$vux.confirm.show({
          title: '温馨提示',
          content: "你确定要删除？",
          onCancel: () => {
            console.log('plugin cancel')
          },
          onConfirm: () => {
            console.log('plugin confirm');
            let formdata = new FormData();
            formdata.append('id', choose_guess_id);
            formdata.append('uid', this.uid);
            this.$ajax.uploadForm(DELETEGUESSBYID, {}, formdata).then(res => {
              this.$vux.toast.text(res.msg);
              if (res.code == 200) {
                this.initData()
              }
            })
          }
        })
      },
      toRecharge(){
        this.$vux.confirm.show({
          title: '余额不足',
          content: '请去我的中心充值',
          onCancel: () => {
            console.log('plugin cancel')
          },
          onConfirm: () => {
            if (window.android) {
              window.android.toRecharge();
            } else {
              //pushToDrawCash 提现方法
              window.webkit.messageHandlers.lwdkit.postMessage({
                action: "pushToRecharge",
                data: {}
              })
            }
          }
        })
      },
      touzhu_click() {
        // @param  uid    用户Id
        // @param  wager  下注金额
        // @param  id      投注表主键id
        // JSON.stringify(data) == "{}"
        if (this.getMatch.length > 0 && this.getMatch) {
          if (this.inputval >= 1) {
            if(Number(this.inputval)<=Number(this.yue)){
              console.log(this.getMatch);//[33,38]
              let formdata = new FormData();
              formdata.append('uid', this.uid);
              formdata.append('wager', this.inputval);
              formdata.append('id', this.getMatch);
              formdata.append('game_id',this.getMatchid);
              // this.getMatch.forEach((item) => {
              //   formdata.append('id', item);
              // });

              // this.$ajax.post(MYCARTTOUZHU, {
              //   uid: this.uid,
              //   wager: this.inputval,
              //   id: this.getMatch
              // }).then(res=>{
              //     this.cartData.inputval = '';
              //     this.$vux.toast.text(res.msg);
              //     if (res.code == 200) {
              //       this.initData();
              //     }
              // })
              this.$ajax.uploadForm(MYCARTTOUZHU, {}, formdata).then(res => {
                this.inputval = '';
                if (res.code == 200) {
                  // this.$vux.toast.text(res.msg);
                  this.initData();
                  this.$vux.confirm.show({
                    title: '温馨提示',
                    content: res.msg,
                    confirmText:'继续投注',
                    cancelText:'投注详情',
                    onCancel: () => {
                      let toUrl = document.URL.replace(/guessCart/g, "usercenter").split('?')[0];
                      if (window.android) {
                        window.android.jumpTo(toUrl);
                      } else {
                        // //pushToDrawCash 提现方法
                        //pushToBusinessRecord 投注记录
                        window.webkit.messageHandlers.lwdkit.postMessage({
                          action: "pushToBusinessRecord",
                          data: {}
                        })
                      }
                    },
                    onConfirm: () => {

                    }
                  })
                }
              })
            }else {
              this.toRecharge()
            }
          } else {
            this.$vux.toast.text('最少一块钱');
          }
          // console.log(this.getMatch);
        } else {
          this.$vux.toast.text('请选选择玩法类型')
        }
      }
    }
  }
</script>
<style>
  body {
    padding-bottom: 1.26rem;
  }
</style>
<style scoped lang="less">
  .bottom-fixed {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;

    .touzhu {
      width: 2.10rem;
      background-color: #f55d54;
      color: #fff;
      font-size: 0.36rem;
    }

    .input-line {
      margin-bottom: 0.2rem;
      height: 0.5rem;
      margin-left: .4rem;
      margin-right: .56rem;

      input {
        height: 100%;
        border: none;
      }
    }

    .result-text {
      color: red;
      font-size: 0.24rem;
      padding-top: .2rem;
      padding-left: .4rem;
    }
  }

  .match-title {
    font-size: 14px;
    padding: 0.1rem 0.4rem;

    .match-title-top {
      color: #ccc;
    }

    .match-vs {
      .vs {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
      }
    }
  }

  .choose-box {
    &:last-child {
      &.vux-1px-b:after {
        border-color: transparent;
      }
    }

    .choose-item {
      margin-left: 0.36rem;
      height: 0.8rem;
      font-size: 14px;

      .input-check {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
      }

      span {
        display: inline-block;
        text-align: center;
      }

      .fenlei {
        width: 1.8rem;

      }

      .result {
        width: 1.5rem;
      }

      .odds {
        width: 25%;
      }

      .delete {
        width: 17%;
        color: red;
      }
    }
  }

</style>
